<!--卓智达 收藏设备列表 -->
<template>
  <div>
    <div style="display: flex;flex-direction: row-reverse">
      <div style="width: 55px">
        <Button style="margin-left: 3px" :title="$t('refresh')" icon="md-search" @click="search"></Button>

      </div>
      <Input id="input-device-search" clearable  v-model="srhValue" @on-search="search" :placeholder="$t('keyword')" />
    </div>
    <Tree id="device-collect-tree"
          :data="deviceDatas"
          :load-data="loadData"
          :render="renderContent"
          :select-node="selectNode"
          @on-select-change="changeNode" expand-node ></Tree>
  </div>
</template>
<script>
import DeviceFavorite from '@/api/DeviceFavorite';
import PoptipBtn from "@/view/Home/map/RelationButton";
import {solveGps} from "@/view/Home/map/maptools/tool/GpsUtils";
import {apiResult} from "@/libs/util";
export default {
  components:{PoptipBtn},
  watch:{
    deviceStatus(newVal, oldVal){
      this.syncDeviceOnlineStatus(this.deviceDatas,newVal);
    }
  },
  computed:{
    deviceStatus(){
      return this.$store.getters.getDeviceStatus;
    }
  },
  data(){
    return{
      api: new DeviceFavorite(),
      srhValue:null,
      deviceDatas:[],
      selectNode:false

    }
  },
  methods:{
    /**
     * 同步设备状态
     */
    syncDeviceOnlineStatus(data,statusData){
      if (!!data){
        data.forEach(item=>{
          if (item.type != 'chn'){
            if (!!item.children && item.children.length > 0){
              if (this.syncDeviceOnlineStatus(item.children,statusData) === true){
                return true;
              }
            }
          }else{
            if (item.arrt.deviceCode == statusData.deviceCode){
              if (statusData.action == 1){
                item.online = '1'
              }else{
                item.online = '0'
              }
              return true;
            }
          }
        });
      }
      return false;
    },
    search(){
      this.api.findByUser(JSON.stringify({keyword:this.srhValue})).then(res=>{
          apiResult(res.data,false,result=>{
            this.deviceDatas = result.data;
            if (!!this.deviceDatas){
              this.deviceDatas.forEach((item)=>{
                if (!!item.longitude && item.longitude>0.0){
                  if (!!item.coordinateSystem){
                    const gpsData = solveGps(
                      //"WGS84",
                      item.coordinateSystem,
                      parseFloat(item.latitude),
                      parseFloat(item.longitude));
                    item.longitude=gpsData.lon;
                    item.latitude=gpsData.lat;
                  }
                }
              })
            }
            //console.log(this.deviceDatas);
            this.$emit("device-refresh",this.deviceDatas);
          })
        /*if (res.data.code === 0){

          this.deviceDatas = res.data.data;
          if (!!this.deviceDatas){
            this.deviceDatas.forEach((item)=>{
              if (!!item.longitude && item.longitude>0.0){
                if (!!item.coordinateSystem){
                  const gpsData = solveGps(
                    //"WGS84",
                    item.coordinateSystem,
                    parseFloat(item.latitude),
                    parseFloat(item.longitude));
                  item.longitude=gpsData.lon;
                  item.latitude=gpsData.lat;
                }
              }
            })
          }
          //console.log(this.deviceDatas);
          this.$emit("device-refresh",this.deviceDatas);
        }else{
          this.$Message.error(res.data.msg);
        }*/
      });
    },
    loadData(){

    },
    renderContent(h, { root, node, data }){
      if ('1' === data.online){
        /** 在线的通道 */
        return(
          <Poptip trigger="hover" placement="right" width="240" props={{transfer:true}}>
            <span style="display:inline-block;width:100%;font-Weight:bold;color: green;font-size:16px" title={data.title}
                  onclick={()=>{
                    this.$emit('chn-node-click', "locate",node, data)
                  }}
            >{data.title}</span>
            <div class="poptip-div" slot="content">
              <PoptipBtn props={{status:1,favroteTitle:this.$t('cancel_favorite')}}
                         onBtnClick={(event)=>{ //需要这么写，对应的是组件<PoptipBtn> this.$emit('btnClick', event)
                           this.handle(event,node, data)
                         }}
              >
              </PoptipBtn>
            </div>
          </Poptip>
        )
      }else {
        //离线
        return (
          <Poptip trigger="hover" placement="right" width="200" props={{transfer:true}}>
            <span style="display:inline-block;width:100%;font-Weight:bold;color: #aeaeae;font-size:16px" title={data.title}
                  onclick={()=>{
                    this.$emit('chn-node-click', "locate",node, data)
                  }}
            >{data.title}</span>
            <div class="poptip-div" slot="content">
              <PoptipBtn props={{status:0,favroteTitle:this.$t('cancel_favorite')}}
                         onBtnClick={(event)=>{ //需要这么写，对应的是组件<PoptipBtn> this.$emit('btnClick', event)
                           this.handle(event,node, data)
                         }}
              >
              </PoptipBtn>
            </div>
          </Poptip>
        )
      }
    },
    cancelFavorite(event,data){
      this.api.remove(JSON.stringify({deviceCode:data.arrt.deviceCode})).then(res=>{
          apiResult(res.data,true,result=>{
            this.search();
          })

      });
    },
    changeNode(){

    },
    handle(event,node,data){
      if ('favorite' === event){
        this.cancelFavorite(event,data)
      }else{
        this.$emit('chn-node-click',event,node, data)
      }
    }
  },
  mounted() {
    this.search();
  }
}
</script>
